<template>
  <tool-page title="格式化日期" :value="value" @generate="generate" :remark="remark">
    <template #operate>
      文字：<Input v-model="inputValue" placeholder="请输入" style="width: 300px"/>
    </template>
    <template #buttonBefore>
      格式：
      <i-select v-model="format" @on-change="onFormatChange" style="width: 240px">
        <i-option value="yyyy-MM-dd HH:mm:ss" label="年-月-日 时-分-秒"></i-option>
        <i-option value="yyyy/MM/dd HH:mm:ss" label="年/月/日 时:分:秒"></i-option>
        <i-option value="yyyy年MM月dd日 HH:mm:ss" label="年年月月日日 时:分:秒"></i-option>
        <i-option value="yyyy年MM月dd日 HH时mm分ss秒" label="年年月月日日 时时分分秒秒"></i-option>
        <i-option value="yyyy MM dd HH:mm:ss" label="年 月 日 时:分:秒"></i-option>
        <i-option value="yyyyMMdd HHmmss" label="年月日 时分秒"></i-option>
        <i-option value="yyyyMMddHHmmss" label="年月日时分秒"></i-option>
        <i-option value="yyyyMMdd" label="年月日"></i-option>
        <i-option value="yyyy年MM月dd日" label="年年月月日日"></i-option>
        <i-option value="HHmmss" label="时分秒"></i-option>
        <i-option value="HH时mm分ss秒" label="时时分分秒秒"></i-option>
        <i-option value="yyyy年" label="年"></i-option>
        <i-option value="MM月" label="月"></i-option>
        <i-option value="dd日" label="日"></i-option>
        <i-option value="HH时" label="时"></i-option>
        <i-option value="mm分" label="分"></i-option>
        <i-option value="ss秒" label="秒"></i-option>
        <i-option value="timestamp" label="时间戳"></i-option>
      </i-select>
      <Button @click="handleRandom">随机的</Button>
    </template>
  </tool-page>
</template>

<script>
import {DateUtil} from "baitu";
import {Button} from "view-ui-plus";

export default {
  name: "FormatDate",
  components: {Button},
  data() {
    return {
      value: '',
      inputValue: '',
      format: 'yyyy-MM-dd HH:mm:ss',
      remark: '输入任意时间格式文字，即可格式化成指定日期格式'
    }
  },
  methods: {
    generate() {
      if (!this.inputValue) {
        this.value = DateUtil.format(new Date(), this.format)
        return;
      }
      if (this.format === 'timestamp') {
        this.value = DateUtil.parse(this.inputValue).getTime()
        return
      }
      this.value = DateUtil.format(this.inputValue, this.format);
    },
    handleRandom() {
      this.inputValue = DateUtil.formatDateTime(this.simpleUtils.randomDate())
      this.generate()
    },
    onFormatChange() {
      this.generate();
    }
  }
}
</script>

<style scoped>

</style>
